<template>
  <div>
    <my-head></my-head>
    <div>
      <div class="main">
        <div class="aboutus_top">
          <div>
            <h1>关于掌阅精选</h1>
            <p>掌阅旗下产品，专注严肃阅读</p>
          </div>
          <img src="../../public/img/aboutus_top.png" alt="">
        </div>
        <!-- 公司简介 -->
        <div class="company-intro main-item">
          <h2>公司简介</h2>
          <img src="../../public/img/guanyuwomen.png" alt="" />
          <ul>
            <li>
              <h4>掌阅简介</h4>
              <p>
                掌阅科技股份有限公司成立于2008年9月，是我国领先的数字阅读平台，2017年9月，掌阅科技股份有限公司在上海证券交易所挂牌上市，是主板目前唯一专注于数字阅读服务的互联网文化领域的上市公司（股票代码：603533），目前掌阅科技已与国内外700多家优质的版权方合作，为全球150多个国家和地区的数亿用户提供高品质的图书内容和智能化的产品及体验。
              </p>
              <h4>掌阅精选机构服务</h4>
              <p>
                是掌阅精选旗下机构阅读产品，专注为政企事业单位提供数字阅读解决方案。依托精选的“出版图书”资源、独创的“协同阅读”方式和“阅读服务“运营，帮助职工养成阅读习惯，提升职工知识能力和文化素养，助力全民阅读、建设书香中国。
              </p>
            </li>
            <div></div>
            <li>
              <h4>我们的文化</h4>
              <div class="culture">
                <div class="culture-left">
                  <h4>愿景</h4>
                  <p>全球最专业的阅读平台使命 让阅读无处不在</p>
                  <h4>价值观</h4>
                  <p>正直、务实、专注、创新</p>
                  <h4>行为准则</h4>
                  <p>让知识与服务联结分享人类智慧</p>
                </div>
                <div class="culture-right hide">
                  <h4>使命</h4>
                  <p>让知识与服务联结分享人类智慧</p>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <!-- 新闻动态 -->
        <div class="news main-item1">
          <h2 class="n-title1">新闻动态</h2>
          <ul class="new-container">
            <li>
              <a
                href="http://m.zqrb.cn/gscy/gongsi/2021-01-13/A1610534198137.html"
              >
                <img src="../../public/img/8_xinwen.png" alt="" />
                <div class="news-text">
                  <h4>掌阅科技发布2020年度数字阅读报告</h4><br>
                  <span>2021/1/13</span>
                  <span>数字阅读用户年轻化趋势凸显</span>
                  <div><span>阅读全文</span><span></span></div>
                </div>
              </a>
            </li>
            <li>
              <a
                href="https://baijiahao.baidu.com/s?id=1687419348431699551&amp;wfr=spider&amp;for=pc"
              >
                <img src="../../public/img/7_xinwen.png" alt="" />
                <div class="news-text">
                  <h4>上海市政协“国是书院”线上读书频道开通</h4>
                  <span>2020/12/29</span>
                  <span>开通仪式在上海市政协举行</span>
                  <div><span>阅读全文</span><span></span></div>
                </div>
              </a>
            </li>
            <li>
              <a href="https://new.qq.com/rain/a/20201026A05JPM00">
                <img src="../../public/img/6_xinwen.png" alt="" />
                <div class="news-text">
                  <h4>掌阅科技发布2020年第三季度财报</h4><br>
                  <span>2020/10/26</span>
                  <span class="z_ellipsis"
                    >掌阅科技：2020前三季度实现营收14.95亿元
                    探索定制化机构服务</span
                  >
                  <div class="hover-btn">
                    <span>阅读全文</span><span></span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a
                href="https://baijiahao.baidu.com/s?id=1676155155738804607&amp;wfr=spider&amp;for=pc"
              >
                <img src="../../public/img/5_xinwen.jpeg" alt="" />
                <div class="news-text">
                  <h4>掌阅科技发布2020年半年度报告</h4><br>
                  <span>2020/8/27</span>
                  <span
                    >掌阅科技上半年实现净利1.1亿元 拓展to B服务“掌阅精选”</span
                  >
                  <div><span>阅读全文</span><span></span></div>
                </div>
              </a>
            </li>
            <li>
              <a
                href="https://tech.sina.com.cn/roll/2020-08-18/doc-iivhvpwy1662492.shtml"
              >
                <img src="../../public/img/4_xinwen.png" alt="" />
                <div class="news-text">
                  <h4>
                    掌阅精选助力江苏省 “百馆荐书 全省共读”阅读推广活动全面启动
                  </h4>
                  <span>2020/8/18</span>
                  <span>案例分享丨江苏省南京图书馆与掌阅科技达成合作</span>
                  <div><span>阅读全文</span><span></span></div>
                </div>
              </a>
            </li>
            <li>
              <a
                href="http://www.xunjk.com/xinwen/cy/2020/0731/072020_111003.html"
              >
                <img src="../../public/img/2_xinwen.jpeg" alt="" />
                <div class="news-text">
                  <h4>中国光大银行专属职工电子书屋正式上线了！</h4>
                  <span>2020/7/31</span>
                  <span class="z_ellipsis"
                    >案例分享丨掌阅精选与光大银行达成合作关系</span
                  >
                  <div class="hover-btn">
                    <span>阅读全文</span><span></span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="http://lzbs.com.cn/biz/2020-07/31/content_4658937.htm">
                <img src="../../public/img/1_xinwen.jpg" alt="" />
                <div class="news-text">
                  <h4>掌阅精选与中国评剧院达成合作关系</h4><br>
                  <span>2020/7/31</span>
                  <span class="z_ellipsis"
                    >案例分享丨掌阅精选与中国评剧院达成合作关系</span
                  >
                  <div class="hover-btn">
                    <span>阅读全文</span><span></span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a
                href="https://baijiahao.baidu.com/s?id=1672904011032321976&amp;wfr=spider&amp;for=pc"
              >
                <img src="../../public/img/3_xinwen.png" alt="" />
                <div class="news-text">
                  <h4>西安工业大学毕业生被图书馆“终生阅读卡”圈粉</h4>
                  <span>2020/7/22</span>
                  <span class="z_ellipsis"
                    >案例分享丨西安工业大学图书馆联合掌阅精选为毕业生送礼</span
                  >
                  <div class="hover-btn">
                    <span>阅读全文</span><span></span>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <!-- 活动动态 -->
        <div class="news main-item2">
          <h2>活动动态</h2>
          <ul class="new-container">
            <li>
              <a href="https://mp.weixin.qq.com/s/2EaBkJA6iNqAlZCtM0fXEQ">
                <img src="../../public/img/5_huodong.png" alt="" />
                <div class="news-text">
                  <h4>【有奖征集】春节拜年活动视频征集中</h4>
                  <span>2021/1/19</span>
                  <span
                    >活动分享丨掌阅精选携各大机构组织策划春节阅读大拜年活动。</span
                  >
                  <div class="hover-btn">
                    <span>阅读全文</span><span></span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="https://mp.weixin.qq.com/s/hg-Rj1O-61pyVYKdrteEfg">
                <img src="../../public/img/6_huodong.png" alt="" />
                <div class="news-text">
                  <h4>2020机构年度阅读报告</h4>
                  <span>2020/1/19</span>
                  <span>阅读报告 | 你的气质里藏着你读过的书</span>
                  <div class="hover-btn">
                    <span>阅读全文</span><span></span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="https://mp.weixin.qq.com/s/ohSu_pzBynijet2JAz45bQ">
                <img src="../../public/img/7_huodong.png" alt="" />
                <div class="news-text">
                  <h4>21天打卡挑战开始啦！</h4>
                  <span>2020/11/20</span>
                  <span
                    >活动分享丨2020马上就要过去，2021还会远吗？打卡就是现在</span
                  >
                  <div class="hover-btn">
                    <span>阅读全文</span><span></span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="https://mp.weixin.qq.com/s/XbQ660OBn_kqu2lz3AXV9g">
                <img src="../../public/img/4_huodong.png" alt="" />
                <div class="news-text">
                  <h4>中秋话题：一句话证明你是哪里人</h4>
                  <span>2020/9/22</span>
                  <span>活动分享丨话中秋·送祝福 阅读盖楼活动</span>
                  <div class="hover-btn">
                    <span>阅读全文</span><span></span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="https://mp.weixin.qq.com/s/OdzjzdXxBaOHoCmtc1AwBA">
                <img src="../../public/img/3_huodong.png" alt="" />
                <div class="news-text">
                  <h4>秋季读后测试大赛</h4>
                  <span>2020/8/13</span>
                  <span>活动分享丨读后测试，秋季硕果累累，愿你读有所获</span>
                  <div class="hover-btn">
                    <span>阅读全文</span><span></span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="https://mp.weixin.qq.com/s/nHWNXb7UNClwfAbri9Z-8Q">
                <img src="../../public/img/3_huodong.png" alt="" />
                <div class="news-text">
                  <h4>掌阅精选青少年“悦读之星”阅读大赛</h4>
                  <span>2020/7/31</span>
                  <span>活动分享丨第一届青少年“悦读之星”阅读大赛</span>
                  <div class="hover-btn">
                    <span>阅读全文</span><span></span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="https://mp.weixin.qq.com/s/REXiMJHWZXyR692A1rQJAA">
                <img src="../../public/img/8_huodong.png" alt="" />

                <div class="news-text">
                  <h4>党建读书月共读活动</h4>
                  <span>2020/7/21</span>
                  <span>活动分享丨品读经典 锤炼党性</span>
                  <div><span>阅读全文</span></div>
                </div>
              </a>
            </li>
            <li>
              <a href="https://mp.weixin.qq.com/s/_QdFlPD1ZRLmND2EXRn_PQ">
                <img src="../../public/img/2_huodong.png" alt="" />
                <div class="news-text">
                  <h4>全国共读最美书评大赛</h4>
                  <span>2020/5/31</span>
                  <span>活动分享丨阅读精品好书，撰写最美书评</span>
                  <div><span>阅读全文</span></div>
                </div>
              </a>
            </li>
          </ul>
        </div>

        <!-- 联系我们 -->
        <div class="company-intro contact-us main-item">
          <h2>联系我们</h2>
          <ul>
            <li>
              <h4>售前咨询</h4>
              <p>电话：15546099719</p>
              <p>邮箱：zhangye@zhangyue.com</p>
              <span>数字图书馆软硬件产品、机构数字阅读解决方案</span>
              <h4>售后服务</h4>
              <p>电话：17310068086</p>

              <p>邮箱：tangxiujuan@zhangyue.com</p>
              <span>产品培训、机构阅读报告、内容及活动等服务</span>
            </li>
            <div></div>
            <li>
              <h4>商务合作咨询</h4>
              <p>电话：18612516926</p>
              <p>邮箱：qinchenfei@zhangyue.com</p>
              <span>品牌媒体联合推广、异业联合活动</span>
              <h4>渠道代理咨询</h4>
              <p>电话：18101098682</p>
              <p>邮箱：liwenli@zhangyue.com<br /></p>
              <span>渠道合作&amp;代理商招募</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <footerd></footerd>
    <kefu></kefu>
    <my-tail></my-tail>
  </div>
</template>
<script>
import MyHead from '../components/MyHead.vue'
import kefu from '../components/kefu.vue'
import MyTail from '../components/MyTail.vue'
export default {
  components:{ kefu,MyHead,MyTail}
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
  }
  /* 去掉a的下划线 */
  a {
    text-decoration: none;
  }
  a:active,a:link,a:visited{
    color: black;
  }
  a:hover{
    color: black;
  }
  /* 去掉ul，ol的默认列表项标记 */
  ul,ol {
    list-style: none;
  }
  /* 清除浮动 */
  .clearfloat::after {
    content: "\200B";
    display:block;
    height:0;
    clear:both;
  }
  /* ie6,7,8 */
  .clearfloat {
    *zoom: 1;
  }
.aboutus_top{
  width: 100%;
  margin: 0 auto;
  max-width: 1400px;
  min-width: 1200px;
  background: #F7F8FA;
  height: 360px;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.aboutus_top > img {
  position: absolute;
  right: 100px;
  width: 560px;
  height: 360px;
}
.aboutus_top > div {
  position: absolute;
  left: 100px;
  width: 400px;
  height: 360px;
}
.aboutus_top > div > h1{
  margin-top: 143px;
 text-align: left;
 font-size:40px;
 font-weight:500;
 margin-bottom:12px;
}
.aboutus_top > div > p{
 font-size:22px;
 opacity: .8;
 text-align: left;
}
.contact-us {
  height: 618px;
  background-image: url(../../public/img/lianxiwomen.png);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: right;
  background-size: contain;
}
.main > .company-intro {
  text-align: center;
}
.main > .company-intro > h2 {
  font-weight: 500;
  font-size: 32px;
  padding-top: 50px;
  padding-bottom: 50px;
}
.main > .company-intro > img {
  width: 1200px;
}
.main > .company-intro > ul {
  width: 1200px;
  margin: 0 auto;
  margin-top: 48px;
  margin-bottom: 48px;
  display: flex;
  justify-content: space-between;
}
.main > .company-intro > ul > li {
  display: inline;
  width: 550px;
  margin: 0 auto;
  text-align: left;
}
.main > .company-intro > ul > div {
 width: 1px;
 height:263px;
 opacity: .6;
 border-left: 1px solid #8c8c8c;
}
.main > .company-intro > ul > li > p{
 color: #8c8c8c;
 margin-bottom: 12px;
}
.main > .company-intro > ul > li > div > div> p{
 color: #8c8c8c;
 margin-bottom: 12px;
}
.main > .company-intro > ul > li > h4{
 font-size:16px;
 font-weight: 500;
 margin-bottom: 4px;
 color: #262626;
}
.main > .company-intro > ul > li > div > div> h4{
 font-size:16px;
 font-weight: 500;
 margin-bottom: 4px;
 color: #262626;
}
.n-title1{
  padding-top: 60px;
}
.news > h2 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 48px;
  color: #262626;
}
.news > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.news > ul > li > a > img {
  width: 273px;
  height: 114px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.news > ul > li > a > div {
  width: 273px;
  height: 154px;
  background-color: #fff;
  text-align: left;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.news {
  text-align: center;
  background-color: #F7F8FA;
}
.news > ul {
  margin: 0 auto;
  width: 1200px;
  display: flex wrap;
  justify-content: space-between;
}
.news-text > h4 {
  color: #262626;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 14px;
}
.news-text > span {
  display: inline-block;
  width: 273px;
  height: 20px;
  color: #8c8c8c;
  font-size: 14px;
}
.news-text {
  position: relative;
}
.news-text > div {
  position: absolute;
  bottom: 10px;
}
.news-text > div > span{
  margin-top: 24px;
  color: #5788D9;
}
.news > ul > li {
  width: 273px;
  height: 350px;
  display: inline-block;
  overflow: hidden;
}
</style>

